<template>
  <!-- 这是新建假单 -->
  <div>
    <div class="item form_box">
      <h1>请假单</h1>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="表单id" v-if="pageType==='search'" style="float:left;margin:0 20px;">
          <span>{{form.id}}</span>
        </el-form-item>
        <el-form-item label="用户id" style="float:left;margin:0 20px;">
          <span>{{form.uid}}</span>
        </el-form-item>
        <el-form-item label="请假人" style="float:left;margin:0 20px;">
          <span>{{form.name}}</span>
        </el-form-item>
        <el-form-item label="创建时间" v-if="pageType==='search'" style="float:left;margin:0 20px;">
          <span>{{form.createTime}}</span>
        </el-form-item>
        <el-form-item label>
          <div></div>
        </el-form-item>
        <el-form-item label="请假时间">
          <el-date-picker
            disabled
            format="yyyy-MM-dd HH"
            value-format="yyyy-MM-dd HH"
            v-model="form.datetime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="请假类型">
          <el-radio-group v-model="form.type" disabled>
            <el-radio label="病假"></el-radio>
            <el-radio label="事假"></el-radio>
            <el-radio label="调休"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="请假原因">
          <el-input type="textarea" v-model="form.reason" disabled></el-input>
        </el-form-item>
        <!-- <el-form-item label="审核原因">
        <el-input type="textarea" v-model="reason"></el-input>
        </el-form-item>-->
        <el-form-item v-if="isShowBtns">
          <!-- <el-button type="primary">取消</el-button> -->
          <el-button type="primary" @click="handlePass">审核通过</el-button>
          <el-button type="primary" @click="handleRefuse">审核拒绝</el-button>
        </el-form-item>
        <el-form-item v-else>{{yourCommond}}</el-form-item>
      </el-form>
    </div>
    <div class="item">
      <h1 style="display:inline-block;">假单状态</h1>
      <span style="margin-left:10px;">{{fakeState}}</span>
    </div>
  </div>
</template>
<script>
import { verify_fakeinfo_one, get_fakeinfo_one } from "@/api/fake";
import { getObjByString, getMap, isArray, getDataBySession } from "@/utils";
import { type } from "os";
import { debug } from "util";
export default {
  props: {
    id: {
      // 表单id
      type: String
    }
  },
  data() {
    return {
      reason: "",
      form: {
        id: 0, // 表单id（不可修改）
        uid: "", // 创建者id（不可修改）
        name: "", // 创建者姓名（不可修改）
        datetime: [], // 请假日期
        type: "", // 请假类型
        reason: "" // 请假原因
      },
      isShowBtns: false,
      fakeState: "" // 请假单状态
    };
  },
  watch: {
    id: {
      handler(n, o) {
        this.init();
      }
    }
  },
  computed: {
    yourCommond() {
      if (!this.form.Approvers) return "";
      else if (this.form.Approvers[this.UserInfo.uid].status === 1) {
        return "已通过";
      } else if (this.form.Approvers[this.UserInfo.uid].status === 2) {
        return "已拒绝";
      }
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.setUserInfo();
      this.getFakeOneinfo();
    },
    // 设置用户信息
    setUserInfo() {
      this.UserInfo = JSON.parse(getDataBySession("UserInfo"));
      if (this.UserInfo == null) {
        this.$router.push({ path: "/login" });
      }
      this.UserInfo.relationship = JSON.parse(this.UserInfo.relationship);
    },
    // 设置操作按钮是否可见
    setIShowBtns() {
      this.isShowBtns = this.form.Approvers[this.UserInfo.uid].status === 0;
    },
    // 设置请假单当前状态
    setFakeState() {
      if (this.form.state == 0) this.fakeState = "待审核";
      if (this.form.state == 1) this.fakeState = "审核已通过";
      if (this.form.state == 2) this.fakeState = "审核已拒绝";
    },
    // 获得员工某条请假单内容
    getFakeOneinfo() {
      let param = {
        companyId: this.UserInfo.companyId, // 公司id
        id: this.id // 请假单id
      };
      get_fakeinfo_one(param)
        .then(res => {
          //   for (let k in this.form) { this.$set(this.form, k, res[k]);  }
          Object.assign(this.form, res); // 赋默认值
          this.setIShowBtns();
          this.setFakeState();
          console.log(this.form);
        })
        .catch(err => {});
    },
    // 点击通过
    // 1 表单信息 + 公司id + 公司提供的审核关系 + 待审核关系 + 提交数据库
    handlePass() {
      let param = {
        companyId: this.UserInfo.companyId, // 公司id
        id: this.id, // 表单id
        uid: this.UserInfo.uid, // 审核者id
        status: 1, // 同意
        reason: "通过" // 原因
      };
      verify_fakeinfo_one(param)
        .then(res => {
          this.init();
          this.$emit("refresh", { refresh: true });
          console.log("成功", res);
        })
        .catch(err => {
          console.log("失败", err);
        });
      //   console.log("这里", param);
    },
    // 点击拒绝
    handleRefuse() {
      let param = {
        companyId: this.UserInfo.companyId, // 公司id
        id: this.id, // 表单id
        uid: this.UserInfo.uid, // 审核者id
        status: 2, // 同意
        reason: "拒绝" // 原因
      };
      verify_fakeinfo_one(param)
        .then(res => {
          this.init();
          this.$emit("refresh", { refresh: true });
          console.log("成功", res);
        })
        .catch(err => {
          console.log("失败", err);
        });
    }
  }
};
</script>
<style scoped>
.item {
  margin-bottom: 20px;
}
.form_box {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>